<template>
	<view>
		<view class="serach">
			<van-search :value="key" background="#ff0000" placeholder="请输入搜索关键词" @change='search'  @search="doserach" />
		</view>
		 <view v-if="key.length>0">
		 	<van-cell-group>
		 	  <van-cell :title="item.goods_name" v-for="(item,index) in shoplist" :key='index'/>
		 	</van-cell-group>
		 </view>
		<view class="ss" v-else>
			<view class="an">
				<span>最近搜索</span>
				<van-icon name="delete-o" />
			</view>
			<p>暂无搜索记录</p>
			<van-tag type="primary" v-for="(item,index) in historyList" :key='index'>{{item}}</van-tag>
		</view>
	</view>
</template>

<script>
import {Shop} from '../../api/api.js';
	export default {
		data() {
			return {
				shoplist:[],
				key:"",
				historyList: wx.getStorageSync("history") || []
			};
		},
		onLoad() {
			this.Shoplist()
		},
		methods:{
			search(e){
				console.log('23',e)
				this.key = e.detail
				this.Shoplist()
			},
			doserach(e){
				this.historyList.unshift(this.key)
			},
			async Shoplist(e){

				let res=await Shop({data:{query:this.key}})
				console.log(res)
				this.shoplist=res.goods
			},
		},
		watch: {
			historyList: {
				handler(val) {
					wx.setStorageSync("history", val)
				},
				deep: true
			}
		}
	}
	
</script>

<style lang="scss">
.serach{
	height: 100rpx;
	width: 100%;
	background: red;
	overflow: hidden;
}
.ip{
		width: 90%;
		border-radius: 25px;
		color: black;
		background-color: white;
		font-size:10px;
		line-height:25px; 
		height:20px;
		margin: 10px 10px;
		text-align:center;
}
.an{
	display: flex;
	justify-content: space-between;
}
</style>
